<template>
  <div class="m-istyle">
    <dl >
      <dt>推荐民宿</dt>
      <dd :class="{active:activeIndex===index}" v-for="(item,index) in homestayListsite" :key="item.site" :kid='index' 
      @mousemove="over(index)"
      >{{item}}</dd>
    </dl>  
      <ul class="ibody" >
        <li v-for="(item,index) in list" :key="index">
          <el-card :body-style="{ padding: '0px' }" shadow='never' >
            <img :src="item.src" class="product-img" />
            <div class="cbody">
              <div class="title" :title="item.title">{{item.title}}</div>
              <div class="sub-title" :title="item.sub_title">{{item.sub_title}}</div>
              <div class="product-info">
                <span class="current-price">
                  <span  class="current-price numfont" style="color: #FF6600;font-size:19px;font-weight:500px">￥{{item.price}}</span>
                  <!-- <span class="current-price numfont">378</span> -->
                </span>
              </div>
            </div>
          </el-card>
        </li>
      </ul>
    
  </div>
</template>

<script>
export default {
  data() {
    return {
        list:[{
            src:'https://img.meituan.net/phoenix/5fe28cd8e09e8737e8cb85ee7374904a2389731.jpg@740w_416h_1e_1c',
            title:'【北巷小院&amp;四号】南锣鼓巷地铁站 钟鼓楼 景山 北海 王府井 天安门 故宫',
            sub_title:'整套1居室·可住2人 | 南锣鼓巷' ,
            price:378

        },{
            src:'https://img.meituan.net/phoenix/f97dc56de55656b3ff69de836d8200a6487520.jpg@740w_416h_1e_1c',
            title:'林肯公园Loft二层大床双人间近地铁每客消毒',
            sub_title:'整套可住2人 |南苑' ,
            price:298
        },{
            src:'https://img.meituan.net/phoenix/1d2a9f68cdba1f3ee485b2c95fc748911166419.jpg@740w_416h_1e_1c',
            title:'合风小宅 首都机场/新国展/中粮祥云小镇/山姆大型会员店/后沙峪地铁站(20分钟到首都机场)',
            sub_title:'整套1居室首都机场/新国展' ,
            price:288
        },{
           src:'https://img.meituan.net/phoenix/9569b8d3887acec09585b3791163683e2722538.jpg@740w_416h_1e_1c',
           title:'林肯公园Loft二层大床双人间近地铁每客消毒',
           sub_title:'整套4居室·可住2人 |' ,
           price:168
        },{
           src:'https://img.meituan.net/phoenix/49f6fa7174e4b3f83f3fdd966a737b8d736665.jpg@740w_416h_1e_1c',
           title:'大兴国际机场生活区一居室-小铭家',
           sub_title:'整套4居室·可住2人 |大兴北京国际机场' ,
           price:295 
        },{
           src:'https://img.meituan.net/iphoenix/7d9d7bee1d47e8f60eb786eb8762d4a3829704.png@740w_416h_1e_1c',
           title:'机场 大床房 (近首都机场新国展 24h免费接送机)302b',
           sub_title:'整套1居室·可住2人 |首都机场/新国展 ' ,
           price:180 
        }
        ],
      homestayListsite: [
        "北京",
        "天津",
        "青岛",
        "济南",
        "大连",
        "石家庄",
        "秦皇岛",
        "烟台",
        "潍坊",
        "威海"],
        activeIndex:0
    };
  },
  methods:{
      over(index){
          this.activeIndex=index
      }
        
  }

}
</script>

<style lang='scss'>
@import "@/assets/css/index/artistic.scss";
</style>